<template>
  <div class="app-container">

    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button style="margin-left: 20px" type="primary" size="mini" icon="el-icon-plus" @click="handleAddDialog()">新增</el-button>
    </el-card>


    <div class="table-container">
      <el-table
        row-key="id"
        :tree-props="{hasChildren: 'hasChildren', children: 'children'}"
        style="width: 100%;"
        border
        default-expand-all
        :data="tableData">

        <el-table-column
          prop="name"
          label="栏目名称"
          sortable
          width="180">
        </el-table-column>

        <el-table-column
          prop="single"
          label="是否单页">
          <template slot-scope="scope">
            <el-tag size="small" v-if="scope.row.single === 1">单页</el-tag>
            <el-tag size="small" v-else type="success">非单页</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="position"
          label="所处位置">
          <template slot-scope="scope">
            <el-tag size="small" v-if="scope.row.position === 1" type="success">二级导航</el-tag>
            <el-tag size="small" v-else-if="scope.row.position === 0" type="danger">轮播图</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="sort"
          label="排序号">
        </el-table-column>

        <el-table-column
          prop="created"
          label="创建时间">
          <template slot-scope="scope">{{scope.row.created | formatDateTime}}</template>
        </el-table-column>

        <el-table-column
          prop="icon"
          width="200px"
          label="操作">
          <template slot-scope="scope">
            <el-button type="warning" icon="el-icon-edit"  size="mini" @click="handleUpdateDialog(scope.row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" slot="reference" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>


    <el-dialog
      title="新增栏目"
      :visible.sync="dialogFormVisible"
      width="600px"
      :before-close="handleAddFormClose">
      <el-form :model="formData" :rules="rules" ref="dataAddForm" label-width="100px" class="demo-editForm">

        <el-form-item label="上级栏目" prop="parentId">
          <el-select v-model="formData.parentId" placeholder="请选择上级栏目">
            <el-option  :label="channelTreeRootNode.label"
                        :value="channelTreeRootNode.value">
            </el-option>
            <template v-for="item in dataList">
              <el-option :label="item.name" :value="item.id"></el-option>
              <template v-for="child in item.children">
                <el-option :label="child.name" :value="child.id">
                  <span>{{ "- " + child.name }}</span>
                </el-option>
              </template>
            </template>
          </el-select>
        </el-form-item>

        <el-form-item label="栏目名称" prop="name" label-width="100px">
          <el-input v-model="formData.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="是否单页"  prop="single" label-width="100px" >
          <el-switch v-model="formData.single"></el-switch>
        </el-form-item>


        <el-form-item label="栏目位置" prop="sort" label-width="100px">
          <el-select v-model="formData.position" placeholder="请选择">
            <el-option
              v-for="item in channelPositions "
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="排序号" prop="sort" label-width="100px">
          <el-input v-model="formData.sort" :min="1" autocomplete="off">1</el-input>
        </el-form-item>

        <el-form-item label="状态" prop="status" label-width="100px">
          <el-radio-group v-model="formData.status">
            <el-radio :label=0>禁用</el-radio>
            <el-radio :label=1>正常</el-radio>
          </el-radio-group>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="handleAdd('dataAddForm')">立即创建</el-button>
          <el-button @click="resetForm('dataAddForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="修改栏目分类"
      :visible.sync="dialogFormVisible4Edit"
      width="600px"
      :before-close="handleEditFormClose">
      <el-form :model="formData" :rules="rules" ref="dataEditForm" label-width="100px" class="demo-editForm">
        <el-form-item label="上级栏目" prop="parentId">
          <el-select v-model="formData.parentId" placeholder="请选择上级栏目">
            <el-option  :label="channelTreeRootNode.label"
                        :value="channelTreeRootNode.value">
            </el-option>
            <template v-for="item in dataList">
              <el-option :label="item.name" :value="item.id"></el-option>
              <template v-for="child in item.children">
                <el-option :label="child.name" :value="child.id">
                  <span>{{ "- " + child.name }}</span>
                </el-option>
              </template>
            </template>
          </el-select>
        </el-form-item>


        <el-form-item label="栏目名称" prop="name" label-width="100px">
          <el-input v-model="formData.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="是否单页"  prop="single" label-width="100px" >
          <el-switch v-model="formData.single"></el-switch>
        </el-form-item>

        <el-form-item label="栏目位置" prop="sort" label-width="100px">
          <el-select v-model="formData.option" placeholder="请选择">
            <el-option
              v-for="item in channelPositions "
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="排序号" prop="sort" label-width="100px">
          <el-input v-model="formData.sort" :min="1" autocomplete="off">1</el-input>
        </el-form-item>

        <el-form-item label="状态" prop="status" label-width="100px">
          <el-radio-group v-model="formData.status">
            <el-radio :label=0>禁用</el-radio>
            <el-radio :label=1>正常</el-radio>
          </el-radio-group>
        </el-form-item>



        <el-form-item>
          <el-button type="primary" @click="handleEdit('dataEditForm')">修改</el-button>
          <el-button @click="resetForm('dataEditForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>


</template>

<script>
import {findAll,createChannel,deleteChannel,updateChannel,selectChannel,getChannelTree} from "@/api/channel";
import {formatDate} from '@/utils/date';

export default {
  name: "index",

  data() {
    return {
      tableData:[],
      dataList: [],//当前页要展示的列表数据
      formData: {},//表单
      dialogFormVisible: false,//增加表单是否可见
      dialogFormVisible4Edit: false,//编辑表单是否可见
      rules: {//校验规则
        parentId: [{required: true, message: '请选择上级栏目分类', trigger: 'blur'}],
        name: [{required: true, message: '请输入名称', trigger: 'blur'}],
        single: [{required: true, message: '请选择单页或者双页', trigger: 'blur'}],
        sort: [{required: true, message: '请填入排序号', trigger: 'blur'}],
        position: [{required: true, message: '请填入栏目位置', trigger: 'blur'}],
        status: [{required: true, message: '请选择栏目状态', trigger: 'blur'}],

      },

      channelTreeRootNode:{ //根栏目节点的值
        label:"<- 根栏目节点 ->",
        value:0,
      },
      channelPositions:[ //栏目分类位置
        {
          label:"二级导航",
          value: 1
        },

        {
          label:"轮播图",
          value: 2
        },

      ],


    }
  },
  created() {
    console.info("【====系统进入了Channel栏目分类组件======】")
    this.getChannelTree()
    this.getAll()

  },
  filters: {
    //格式化日期
    formatDateTime(time) {
      if (time == null || time === '') {
        return 'N/A';
      }
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  methods: {
    // 弹出添加窗口的方法
    handleAddDialog() {
      console.info("【系统正在弹出的添加栏目分类栏目分类窗口....】")
      this.resetForm();
      this.dialogFormVisible = true;
      console.info("【系统成功弹出的添加栏目分类窗口！!!!】")
    },
    //处理添加的方法
    handleAdd(formName) {
      console.info("【系统正在进行增加栏目分类....】")
      this.$refs[formName].validate((valid) => {
        if (valid) {
          createChannel(this.formData).then(res=>{
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose: () => {
                this.getChannelTree()
              }
          })
            this.dialogFormVisible = false;
            this.getChannelTree();
          });
        }
      });
      console.info("【系统正在进行增加栏目分类成功....】")
    },
    //处理删除的方法
    handleDelete(row) {
      this.$confirm(`此操作将【永久删除】该栏目${row.name}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        deleteChannel(row.id).then(res=>{
          this.$message({
            showClose: true,
            message: '恭喜你，操作成功',
            type: 'success',
            onClose: () => {this.getAll()}
          });

        });
      }).catch(() => {

      });
    },
    // 弹出编辑窗口的方法
    handleUpdateDialog(row) {
      console.info("【系统正在弹出的修改栏目分类窗口....】")
      this.resetForm()
      this.dialogFormVisible4Edit = true
      selectChannel(row.id).then(res=>{
      this.formData = res.data;
      })
      console.info(`【系统正在弹出的修改栏目分类窗口成功，并成功获取了ID为：${row.id}....】的栏目分类详情`)

    },
    //处理修改的方法
    handleEdit(formName) {
      this.$refs[formName].validate((valid) => {
        console.info("【系统正在进行修改栏目分类....】")
        if (valid) { //校验成功
          updateChannel(this.formData.id,this.formData).then(res=>{
            //弹出成功框，显示成功信息
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose: () => {
                this.getAll()
              }
            });
            this.dialogFormVisible4Edit = false;
            this.get();
            console.info("【系统成功修改栏目分类....】")
          })
        }
      });

    },


    //获取栏目分类树的方法
    getChannelTree() {
        console.info("【=========系统正在获取栏目分类树数据中....========】")
        getChannelTree().then(res => {
        this.dataList = res.data
        });
      console.info("【=========系统获取栏目分类树数据成功========】")
    },
    //获取全部栏目
    getAll(){
      console.info("【=========系统正在获取全部栏目数据中....========】")
      findAll().then(res => {
        this.tableData = res.data
      });
      console.info("【=========系统获取全部栏目数据成功========】")
    },

    //重置表单的方法
    resetForm() {
      this.formData = {}
    },
    //关闭新增表单的方法
    handleAddFormClose() {
      this.dialogFormVisible = false
      this.resetForm();
    },
    //关闭修改表单的方法
    handleEditFormClose() {
      this.dialogFormVisible4Edit = false
      this.resetForm();
    }


  }
}
</script>

<style scoped>

</style>
